<template>
  <view class="">
    <uni-segmented-control style="color: #fff;" :current="current" :values="items" @clickItem="onClickItem"
      styleType="text" activeColor="#4cd964"></uni-segmented-control>
    <view class="content">
      <view v-show="current === 0">
        <view class="colorB" style="padding:30rpx;">
          <view class="mainColor border-10" style="border: 1px solid #fff;padding: 10px;">
            <view class="margin-b10">
              <span>充电设备(<span style="color: #bf1c1c">{{ status }}</span>)</span>
              <uni-tag style="float: right;" text="刷新" type="primary" @click="getPileDetail"></uni-tag>
            </view>
            <!-- <view class="margin-b10">充电二维码：{{pileDetail.qrCodeURL}}</view> -->
            <view class="margin-b10">SN： {{pileDetail.pileSn}}</view>
            <view class="margin-b10">运营商： {{ pileDetail.merchantName}}</view>
            <view class="margin-b10">站点： {{ pileDetail.stationName}}</view>
            <view class="flex justify-between align-center ">
              <view class="margin-b10">额定功率（kW）： {{ pileDetail.ratedPower}} </view>
              <view class="margin-b10">额定电流（A）： {{ pileDetail.ratedCurrent}} </view>
            </view>
            <view class="margin-b10">iccid： {{ pileDetail.iccid === null ?'一':pileDetail.iccid}}</view>
            <view class="flex justify-between align-center">
              <view class="">sim卡商： {{simSupplier(pileDetail.simSupplier) }}</view>
              <view class="">卡运营商： {{ operator(pileDetail.operator)}}</view>
            </view>
          </view>
        </view>
        <view class="colorB" style="padding: 30rpx;">
          <uni-title type="h2" title="接口列表" color="#040f25" align="left"></uni-title>
          <view class="mainColor border-10" style="border: 1px solid #fff;padding: 10px;" v-for="item in connectorList"
            :key="item.id">
            <view class="margin-b10">
              <span class="">枪口编号： {{item.pileConnectorCode}}</span>
              <uni-tag text="刷新" type="primary" @click="queryPileConnectorList" style="float: right;"></uni-tag>
            </view>
            <!-- <view class="margin-b10">充电二维码： {{item.connectorQrCodeUrl}}</view> -->
            <view class="margin-b10">状态： {{connectStatus(item.status)}}</view>
            <view class="margin-b10">类型： {{connectType(item.type)}}</view>
            <view class="margin-b10">即时功率（KW）：{{item.instantPower === null?'一':item.instantPower}}</view>
            <view class="margin-b10">SOC（℃）： {{item.soc === null?'一':item.soc}}</view>
            <view class="margin-b10">设备订单号： {{item.equipmentOrderNum === null?'一':item.equipmentOrderNum}}</view>
            <view class="">平台订单： {{item.orderCode === null?'一':item.orderCode}}</view>
          </view>
        </view>
        <view class="colorB" style="padding: 30rpx;">
          <uni-title type="h2" title="充电桩通信日志" color="#040f25" align="left"></uni-title>
          <template v-if="feedList.length !== 0">
            <view class="mainColor border-10 margin-b10" style="border: 1px solid #fff;padding: 10px;"
              v-for="(feed,feedIndex) in feedList" :key="feedIndex">
              <view class="">触发时间：{{feed.createTime}}</view>
              <view>描述：{{feed.description}}</view>
              <view style="width:100%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">
                原始报文：{{feed.originalMsg === null ?'一':feed.originalMsg}}
                <uni-icons v-if="feed.originalMsg !== null" type="download-filled" size="24"
                  @click="copy(feed.originalMsg)"></uni-icons>
              </view>
            </view>
          </template>
          <template v-else>
            <text class="colorB">暂无数据</text>
          </template>
          <uni-pagination show-icon :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total"
            @change="change" />

          <view class="btn-view">
            <view>
              <text
                class="example-info">当前页：{{ queryParams.pageNum }}，数据总量：{{ total }}条，每页数据：{{ queryParams.pageSize }}</text>
            </view>
            <view class="btn-flex">
              <button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
                @click="add"><text class="word-btn-white">增加10条数据</text></button>
              <button class="button" type="default" @click="reset" style="margin-left: 40rpx;">重置数据</button>
            </view>
          </view>
        </view>
      </view>
      <!-- <view v-show="current === 1">
        配置管理
      </view> -->
    </view>

  </view>
</template>

<script>
  import {
    getPileDetailById,
    getPileFeedList
  } from "@/api/pile/basic";
  import {
    queryConnectorListByParams
  } from "@/api/pile/connector";
  import {
    simSupp
  } from '@/common/dict.js'
  import {
    copy
  } from "../../common/copy";
  export default {
    data() {
      return {
        items: ['基本信息', '配置管理'],
        current: 0,
        pileId: '',
        pileDetail: {
          url: ""
        },
        simOperator: [],
        connectorList: [], // 接口列表数组
        feedList: [], // 充电桩通信日志
        total: 0, // 总条数
        queryParams: { // 查询参数
          pileSn: null,
          pageNum: 1,
          pageSize: 10,
        },
        pileSn: null,
        simSuppList: []
      }
    },
    computed: {
      status() {
        const status = this.pileDetail.status;
        // 0-未知；1-在线；2-离线；3-故障
        let str = "";
        if (status === "1") {
          str = "在线";
        } else if (status === "2") {
          str = "离线";
        } else if (status === "3") {
          str = "故障";
        } else {
          str = "未知";
        }
        return str;
      },
    },
    watch: {
      pileSn(newValue, oldValue) {
        if (newValue !== null) {
          this.getFeedList();
        }
      },
    },
    methods: {
      copy(feed) { // 复制文本
        copy(feed)
      },

      add() {
        this.queryParams.pageSize += 10
      },
      reset() {
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
      },

      // 分页触发
      change(e) {
        console.log(e.current);
        this.queryParams.pageNum = e.current
        this.getFeedList()
      },
      getFeedList() {
        this.queryParams.pileSn = this.pileSn;
        getPileFeedList(this.queryParams).then((response) => {
          // console.log("查询充电桩通信日志", response);
          this.feedList = response.data.list;
          this.total = response.data.total;
        });
      },
      connectStatus(status) {
        let arr = this.connectorStatus.find(item => item.dictValue == status)
        return arr.dictLabel
      },
      connectType(type) {
        let arr = this.connectorType.find(item => item.dictValue == type)
        return arr.dictLabel
      },
      simSupplier(sim) {
        simSupp.then(result => {
          this.simSuppList = result
          // console.log('result', result);
        })
        let str = this.simSuppList.find(item => item.dictValue == sim)
        // console.log(str);
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      operator(operator) {
        let str = this.simOperator.find(item => item.dictValue == operator)
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      // 查询充电桩详情接口
      getPileDetail() {
        // console.log(this.pileId);
        const queryForm = {
          pileId: this.pileId,
        };
        getPileDetailById(queryForm).then((response) => {
          this.pileDetail = response.data;
          this.pileSn = this.pileDetail.pileSn;
          this.$modal.showToast(response.msg)
        });
      },
      // 查询接口列表
      queryPileConnectorList() {
        const data = {
          pileIds: [this.pileId],
        };
        queryConnectorListByParams(data)
          .then((response) => {
            // console.log("response", response);
            this.connectorList = response.rows;
            console.log("接口列表", this.connectorList);
            this.$modal.showToast(response.msg)
          })
          .catch((error) => {
            console.log("错误日志", error);
          });
      },
    },
    onLoad(option) {
      console.log(option.id);
      this.pileId = option.id
      this.getPileDetail(); // 查询充电桩详情
      // console.log('dict js文件', simSupp);
      this.getDicts('sim_operator').then(response => {
        // console.log('卡运营商', response.data);
        this.simOperator = response.data
      })
      this.getDicts('connector_status').then(response => {
        // console.log('状态', response.data);
        this.connectorStatus = response.data
      })
      this.getDicts('connector_type').then(response => {
        // console.log('类型', response.data);
        this.connectorType = response.data
      })
      this.queryPileConnectorList() // 查询 接口列表
      this.getFeedList() // 查询充电桩日志
    }
  }
</script>

<style lang="scss" scoped>
  .btn-view {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .btn-flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .button {
    margin-top: 40rpx;
    width: 150px;
    font-size: 14px;
    color: #333;
  }
</style>